<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button appDebounceClick (debounceClick)="goBack()">
        <img src="assets/img/back_left.png" class="backBtnStyle">
      </ion-button>
    </ion-buttons>

    <ion-title>
      {{chatService.currentGroupName}}
    </ion-title>

    <ng-container>
      <ion-buttons *ngIf="appGlobalService.inviteBtn!==undefined" slot="end">
        <ion-button appDebounceClick (debounceClick)="invite()">
          <span>邀请</span>
        </ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button appDebounceClick (debounceClick)="report()">
          <span>举报</span>
        </ion-button>
      </ion-buttons>
    </ng-container>
  </ion-toolbar>
</ion-header>

<ion-content id="ion-content" #chatonline_container appDebounceClick (debounceClick)="hideSubDiv()">

  <ion-infinite-scroll threshold="15%" position="top" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content style="min-height: 1px;" loadingSpinner="crescent" loadingText="正在加载更多数据...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
  
  <div id="ioncdiv">
    <!--2023.12.01 访客模式 -->
    <ng-container *ngIf="appGlobalService.isVisitor">
      <div id="talk-content" class="talk-content" *ngIf="appGlobalService.visitorMsg&&appGlobalService.visitorMsg.msg">
        <div align="center"
          style="height: 0.75rem;font-size: 0.75rem; font-weight: 400;color: rgba(133,136,148,1);line-height: 0.75rem;margin-top: 1.25rem;margin-bottom: 1.25rem;">
          {{appGlobalService.nowDate | imDateFilter:appGlobalService.nowDate:'' }}</div>
        <div class="other_message">
          <img src="assets/img/headportraitstaff.png" alt="" class="avatar fl">
          <p class="text-left">
            {{ appGlobalService.visitorMsg.msg.message | escapeFilter }}
          </p>
        </div>
      </div>
    </ng-container>



    <!-- <div align="center"
        style="height: 0.75rem;font-size: 0.75rem; font-weight: 400;color: rgba(133,136,148,1);line-height: 0.75rem;margin-top: 1.25rem;margin-bottom: 1.25rem;">
        {{message.datetime | imDateFilter:messages[i-1]?messages[i-1].datetime:'' }}</div> -->
    <!--2023.12.01 重新布局聊天窗口-->
    <div id="talkcontentlist" class="talk-content 2 talkcontentlist">

    </div>
    <div id="talk_end" class="talk_end"></div>


  </div>
</ion-content>
<ion-footer>
  <div class="chat">
    <textarea id="{{textareaId}}" class="input" (input)="auto_grow()" [(ngModel)]="message_text" [maxlength]="1024"
      placeholder="请输入聊天内容" maxlength="1024" onchange="this.focus();" onkeydown="this.focus();"
      onkeyup="this.focus();"></textarea>
    <i id="{{addBtnId}}" class="more" appDebounceClick (debounceClick)="showChooseList()"></i>
    <div id="{{sendBtnId}}" class="send" style="display:none;" appDebounceClick (debounceClick)="sendMessage()">发送</div>
  </div>

  <ul class="clearfix share-content NotShowMoreInfoBox" id="{{moreBtnId}}">
    <li appDebounceClick (debounceClick)="getShareByArray('1,2,13','normal')">
      <i class="share-icon wuye"></i>
      <p>店铺</p>
    </li>
    <li appDebounceClick (debounceClick)="getShareByArray('20,21','house')">
      <i class="share-icon fc"></i>
      <p>房产</p>
    </li>
    <li appDebounceClick (debounceClick)="getShareByArray('15,16,18,19','normal')">
      <i class="share-icon wy"></i>
      <p>物业</p>
    </li>
    <li appDebounceClick (debounceClick)="getShareByArray('3,14,23,24,25,27,28,29','normal')">
      <i class="share-icon qzqg"></i>
      <p>求租求购</p>
    </li>
    <li appDebounceClick (debounceClick)="openActivityModal()">
      <i class="share-icon activity"></i>
      <p>活动</p>
    </li>
  </ul>


  <div id="{{chatModalId}}" class="share-container">
    <div class="dropbg" appDebounceClick (debounceClick)="shareitemdismiss()"></div>
    <div class="share-item" style="overflow: auto;">
      <ng-container *ngIf="this.showType==='normal'">
        <ul *ngIf="searchListData" style="margin-bottom:3rem;">
          <li class="wrap" *ngFor="let item of searchListData;let i=index; ">
            <div class="content">
              <ng-container *ngIf="item.pluginId === '1' ||
                  item.pluginId === '2' || 
                  item.pluginId === '13'||
                  item.pluginId === '15' ||
                  item.pluginId === '16' ||
                  item.pluginId === '18' ||
                  item.pluginId === '19' ||
                  item.pluginId === '20' ||
                  item.pluginId === '21'">
                <div class="clearfix relative showimg">
                  <img src="{{item.imags}}" onerror="this.src='assets/img/default_img.png'">
                </div>
              </ng-container>

              <div class="info">
                <p class="content-title">
                  {{item.title}}</p>
                <ng-container *ngIf="item.pluginId === '1' ||
                  item.pluginId === '2' || 
                  item.pluginId === '13'||
                  item.pluginId === '15' ||
                  item.pluginId === '16' ||
                  item.pluginId === '18' ||
                  item.pluginId === '19' ||
                  item.pluginId === '20' ||
                  item.pluginId === '21'">
                  <p class="content-prop"> {{item.build}}</p>
                  <p class="content-prop"> {{item.big_district}}{{item.district}}</p>
                  <p class="content-prop"> {{item.area}}㎡ |{{item.rent}}{{item.rentunit}}</p>
                </ng-container>
                <ng-container *ngIf="item.pluginId === '3' ||
                  item.pluginId === '14' ||
                  item.pluginId === '23' || 
                  item.pluginId === '24' || 
                  item.pluginId === '25' ||
                  item.pluginId === '26' ||
                  item.pluginId === '27' ||
                  item.pluginId === '28' ||
                  item.pluginId === '29'">
                  <p class="content-prop"> {{item.area}}㎡</p>
                  <p class="content-prop"> {{item.big_district}} </p>
                </ng-container>
              </div>
              <div class="operate-checkbox">
                <ion-checkbox slot="end" name="i"
                  style="--size:20px;--background-checked:#FF6314;--border-color-checked:#FF6314;--checkmark-color:#ffffff"
                  [(ngModel)]="item.isChecked" (ionChange)="checkOppChange($event)"></ion-checkbox>
              </div>
            </div>
          </li>
          <li *ngIf="searchListData.length===0">
            <div class="empty-list-div" appDebounceClick (debounceClick)="shareitemdismiss()">
              <img class="empty-list-div-img" src="assets/icon/defect_case@3x.png" />
              <p class="empty-list-div-p">暂无数据</p>
            </div>
          </li>
        </ul>
        <div
          [ngClass]="{'button-box': searchListData&&searchListData.length>0 || caseListData&&caseListData.length>0,'button-box-disable':searchListData&&searchListData.length===0 || caseListData&&caseListData.length===0}"
          class="button-box">
          <button *ngIf="searchListData" appDebounceClick (debounceClick)="sendShare()">发送</button>
          <button *ngIf="caseListData" appDebounceClick (debounceClick)="sendCaseShare()">发送</button>
        </div>
      </ng-container>
      <ng-container *ngIf="this.showType==='house'">
        <ul *ngIf="searchListData" style="margin-bottom:3rem;">
          <li class="wrap" *ngFor="let item of searchListData;let i=index; ">
            <div class="content">
              <ng-container *ngIf="item.pluginId === '1' ||
                  item.pluginId === '2' || 
                  item.pluginId === '13'||
                  item.pluginId === '15' ||
                  item.pluginId === '16' ||
                  item.pluginId === '18' ||
                  item.pluginId === '19' ||
                  item.pluginId === '20' ||
                  item.pluginId === '21'">
                <div class="clearfix relative showimg">
                  <img src="{{item.imags}}" onerror="this.src='assets/img/default_img.png'">
                </div>
              </ng-container>

              <div class="info">
                <p class="content-title">
                  {{item.title}}</p>
                <ng-container *ngIf="item.pluginId === '1' ||
                  item.pluginId === '2' || 
                  item.pluginId === '13'||
                  item.pluginId === '15' ||
                  item.pluginId === '16' ||
                  item.pluginId === '18' ||
                  item.pluginId === '19' ||
                  item.pluginId === '20' ||
                  item.pluginId === '21'">
                  <p class="content-prop"> {{item.build}}</p>
                  <p class="content-prop"> {{item.big_district}}{{item.district}}</p>
                  <p class="content-prop"> {{item.area}}㎡ |{{item.rent}}{{item.rentunit}}</p>
                </ng-container>
                <ng-container *ngIf="item.pluginId === '3' ||
                  item.pluginId === '14' ||
                  item.pluginId === '23' || 
                  item.pluginId === '24' || 
                  item.pluginId === '25' ||
                  item.pluginId === '26' ||
                  item.pluginId === '27' ||
                  item.pluginId === '28' ||
                  item.pluginId === '29'">
                  <p class="content-prop"> {{item.area}}㎡</p>
                  <p class="content-prop"> {{item.big_district}} </p>
                </ng-container>
              </div>
              <div class="operate-checkbox">
                <ion-checkbox slot="end" name="i"
                  style="--size:20px;--background-checked:#FF6314;--border-color-checked:#FF6314;--checkmark-color:#ffffff"
                  [(ngModel)]="item.isChecked" (ionChange)="checkOppChange($event)"></ion-checkbox>
              </div>
            </div>
          </li>
          <li *ngIf="searchListData.length===0">
            <div class="empty-list-div" appDebounceClick (debounceClick)="shareitemdismiss()">
              <img class="empty-list-div-img" src="assets/icon/defect_case@3x.png" />
              <p class="empty-list-div-p">暂无数据</p>
            </div>
          </li>
        </ul>
        <div
          [ngClass]="{'button-box': searchListData&&searchListData.length>0 || caseListData&&caseListData.length>0,'button-box-disable':searchListData&&searchListData.length===0 || caseListData&&caseListData.length===0}"
          class="button-box">
          <button class="button-one" *ngIf="searchListData" appDebounceClick (debounceClick)="sendShare()">发送</button>
          <button class="button-two" *ngIf="caseListData" appDebounceClick (debounceClick)="sendCaseShare()">发送</button>
        </div>
      </ng-container>
    </div>

  </div>

</ion-footer>